<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { dialog } from '@/settings/components/dialog';
import { parse, format } from 'date-fns';

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  roles: [],
  keyWord: '',
});
// const optList = [
//   {
//     disabled: true,
//     value: 'admin',
//     label: t('settings.view.people.index.status.1'),
//   },
//   {
//     value: 'editor',
//     label: t('settings.view.people.index.status.2'),
//   },
//   {
//     value: 'member',
//     label: t('settings.view.people.index.status.3'),
//   },
// ]

// const formOptList = [
//   {
//     value: '',
//     label: t('settings.view.people.index.all'),
//   },
//   {
//     value: 'admin',
//     label: t('settings.view.people.index.status.1'),
//   },
//   {
//     value: 'editor',
//     label: t('settings.view.people.index.status.2'),
//   },
//   {
//     value: 'member',
//     label: t('settings.view.people.index.status.3'),
//   },
// ]
const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/user/list', {
    method: 'post',
    data: {
      keyWord: form.value.keyWord,
      // roles: form.value.roles,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const remove = async (id: string) => {
  console.log(id);
  const { isSuccess } = await $fetch('/admin/user/deleteUserByIds', {
    method: 'post',
    data: {
      userIds: [id],
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

const editRole = async (item: Record<string, any>) => {
  const { button } = await dialog(() => import('./edit-role-window.vue'), {
    title: t('settings.view.people.index.title1'),
    props: {
      id: item.userId,
      nickname: item.nickname,
      username: item.username,
      roles: item.roles,
    },
  });

  if (button == 'ok') {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <!-- <template #header>
        <AFormItem :label="$t('settings.view.people.index.header1')">
          <AInput v-model="form.keyWord" allow-clear />
        </AFormItem>
        <AFormItem :label="$t('settings.view.people.index.column5')">
          <ASelect multiple v-model="form.roles" placeholder="Please select ...">
            <AOption v-for="item of formOptList" :key="item.value" :value="item.value" :label="item.label" />
          </ASelect>
        </AFormItem>
      </template> -->
      <template #columns>
        <ATableColumn :title="$t('settings.view.people.index.column1')" :width="130">
          <template #cell="{ record }">
            <OpenImage :src="record.photo" img-class="w-80 h-80 object-cover" />
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.people.index.column2')" data-index="nickname" />
        <ATableColumn :title="$t('settings.view.people.index.column3')" data-index="username" />

        <ATableColumn :title="$t('settings.view.people.index.column4')" :width="200">
          <template #cell="{ record }">
            {{ format(parse(record.joinDate, 'yyyyMMdd', new Date()), 'yyyy-MM-dd') }}
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.people.index.column5')" :width="200">
          <template #cell="{ record }">
            <ATag v-if="record.roles.includes('admin')" color="orangered">{{ $t('settings.view.people.index.status.1') }}</ATag>
            <ATag v-else-if="record.roles.length > 0" color="blue">{{ $t('settings.view.people.index.status.2') }}</ATag>
            <ATag v-else>{{ $t('settings.view.people.index.status.3') }}</ATag>
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.people.index.column6')" :width="200">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton size="small" @click="editRole(record)" v-if="!record.roles.includes('admin')">
                {{ $t('settings.action.editlimits') }}
              </AButton>
              <AButton type="primary" status="danger" size="small" @click="remove(record.userId)" v-if="!record.roles.includes('admin')" v-confirm>
                {{ $t('settings.action.delete') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
